<template lang="html">
    <div class="course-llist">
        <nav-header></nav-header>
        <div class="zh-table">
        <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
            <div class="open-width" v-if="user_level === 0">
                <el-cascader
                :options="positions"
                v-model="selectedPositions"
                @change="positionChange">
                </el-cascader>
            </div>
            <div class="open-width" v-if="user_level === 0" style="width: 100px">
                <el-select v-model="school" placeholder="选择学校" filterable @change="schoolChange" :loading="school_loading">
                <el-option v-for="(sch,schInx) in schoolList" :key="sch.id" :label="sch.name" :value="sch.id"></el-option>
                </el-select>
            </div>
                <div class="open-width" style="width: 100px">
                <el-select v-model="form.status" filterable placeholder="选择状态">
                    <el-option label="全部状态" :value="0"></el-option>
                    <el-option label="未开始" :value="1"></el-option>
                    <el-option label="进行中" :value="2"></el-option>
                    <el-option label="已结束" :value="3"></el-option>
                </el-select>
                </div>
                        <div class="open-width">
                            <el-input v-model="keyword" placeholder="授课教师" @keyup.enter.native="search"></el-input>
                        </div>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </div>
                    <div class="zh-open-right fr">
            <download-excel class="el-button el-button--primary el-button--small" style="padding: 8px 15px;" :fields="user_level === 0 ? json_fields : json_fields1" :data="listData" name="排课列表.xls">导出Excel</download-excel>
                        <el-button type="danger" @click="delAll">批量删除</el-button>
                    </div>
                </div>
        <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <el-table
                        :data="listData"
                        border
                        @selection-change="tableSelectionChange"
                        max-height="541"
                        style="width: 100%">
                        <el-table-column
                fixed
                        type="selection"
                        width="50"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="platform_names"
                        label="地区"
                        align="center"
                        show-overflow-tooltip
                        v-if="user_level === 0"
                        >
                        </el-table-column>
                <el-table-column
                    prop="school_name"
                    label="学校"
                    align="center"
                    show-overflow-tooltip
                    v-if="user_level === 0"
                    > 
                </el-table-column>
                <el-table-column
                    prop="typeTxt"
                    label="课型"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                prop="name"
                label="公开课名称"
                align="center"
                width="158"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="user_name"
                label="授课教师"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="grade_name"
                label="分类"
                align="center"
                width="158"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="start_time"
                label="直播时间"
                align="center"
                width="230"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                        {{scope.row.start_time}} -- {{scope.row.end_time}}
                    </template>
                </el-table-column>
                <el-table-column
                prop="recorder_name"
                label="直播设备"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="level"
                label="评级"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="is_share"
                label="分享状态"
                align="center"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <div v-text="scope.row.is_share ? '已分享' : '未分享'"></div>
                </template>
                </el-table-column>
                <el-table-column
                prop="live_status"
                label="直播状态"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                fixed="right"
                prop="handle"
                label="操作"
                align="center"
                width="250"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <el-button type="text" @click="toLink(scope.row.id)">查看</el-button>
                    <el-button type="text" v-show="scope.row.is_share === 1" @click="cancelShare(scope.row.id)">取消分享</el-button>
                    <el-tooltip v-show="scope.row.is_share === 0" content="分享至精品课程" placement="bottom" effect="light">
                        <el-button type="text" @click="share(scope.row)">分享</el-button>
                    </el-tooltip>
                    <el-button type="text" class="delete-button" @click="delShow(scope.row.id)">删除</el-button>
                </template>
                </el-table-column>
                    </el-table>
                    <div class="table-pagination" v-show="total_number > 10">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page_index"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            timeStamp: 0,
        user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')),
        loading: {
            status: false,
            txt: "获取数据..."
        },
        form: {
            city: "",
            area: "",
            position: "",
            school: "",
            status: "",
            platform_id: []
        },
        keyword: "",
        city_loading: false,
        area_loading: false,
        position_loading: false,
        school_loading: false,
        cityList: [] /*市 */,
        areaList: [] /*区 */,
        positionList: [] /*镇/街道 */,
        schoolList: [] /*学校 */,
        listData: [],
        listParam: {
            live_status: 0,
            keyword: "",
            page_index: 1,
            page_size: 10
        },
        total_number: 0,
        delSel: null,
        delTips: false,
        positions: [] /*地区列表 */,
        selectedPositions: [] /*选择的地区*/,
        area: "",
        school_loading: false,
        schoolList: [] /*学校 */,
        school: "",
        json_fields: {
            地区: "platform_names",
            学校: "school_name",
            课型: "typeTxt",
            公开课名称: "name",
            授课教师: "user_name",
            分类: "grade_name",
            直播时间: "liveTime",
            直播设备: "recorder_name",
            评级: "level",
            分享状态: "shareTxt",
            直播状态: "live_status"
        },
        json_fields1: {
                课型: "typeTxt",
                公开课名称: "name",
                授课教师: "user_name",
                分类: "grade_name",
                直播时间: "liveTime",
                直播设备: "recorder_name",
                评级: "level",
                分享状态: "shareTxt",
                直播状态: "live_status"
        },
        json_meta: [
            [
            {
                key: "charset",
                value: "utf-8"
            }
            ]
        ],
        };
    },
    mounted() {},
    created() {
        this.getList();
        this.getPositions();
    },
    methods: {
        getPositions() {
        /*获取地区 */
        const success = res => {
            this.positions.push(res.data);
        };
        this.$ajax.get("api/level/get_tree", {
            params: {},
            func: { success: success }
        });
        },
        positionChange(val) {
        let area = val[val.length - 1];
        this.schoolList = [];
        this.school = "";
        this.getSchool(area);
        },
        /**
         * 获取学校
         * @param {Boolean} flag 下拉框收起/展开
         */
        getSchool(area) {
        this.school_loading = true;
        let params = {
            id: area
        };
        const success = res => {
            this.school_loading = false;
            this.schoolList = res.data;
            let arr = [];
            this.schoolList.forEach(item => {
            arr.push(item.id);
            });
            this.form.platform_id = arr;
        };
        this.$ajax.get("api/level/get_school_by_postionid", {
            params: params,
            func: { success: success }
        });
        },
        schoolChange(val) {
        this.form.platform_id = [val];
        },
        getList() {
        this.loading.status = true;
        let params = Object.assign({}, this.listParam, {
            area_id: this.area,
            platform_id: this.form.platform_id
        });
        const success = res => {
            this.loading.status = false;
            this.listData = res.data.data;
            this.timeStamp = new Date().getTime();
            this.total_number = res.data.data_sum;
            this.listData.forEach(ele => {
                ele.liveTime = ele.start_time + '--' + ele.end_time;
            if (Object.is(ele.live_status, 1)) {
                ele.live_status = "未开始";
            }
            if (Object.is(ele.live_status, 2)) {
                ele.live_status = "进行中";
            }
            if (Object.is(ele.live_status, 3)) {
                ele.live_status = "已结束";
            }
            if (Object.is(ele.live_status, 4)) {
                ele.live_status = "已过期";
            }
            if (Object.is(ele.teaching_type, 1)) {
                ele.typeTxt = "新授课";
            }
            if (Object.is(ele.teaching_type, 2)) {
                ele.typeTxt = "复习课";
            }
            if (Object.is(ele.teaching_type, 3)) {
                ele.typeTxt = "讲评课";
            }
            if (Object.is(ele.teaching_type, 4)) {
                ele.typeTxt = "主题活动课";
            }
            ele.shareTxt = ele.is_share ? '已分享' : '未分享';
            ele.grade_name =
                ele.study_section_name +
                ">" +
                ele.grade_name +
                ">" +
                ele.subject_name;
            });
        };
        this.$ajax.get("api/teachingschedule/manage_schedule_list", {
            params: params,
            func: { success: success }
        });
        },
        search() {
        this.listParam.keyword = this.keyword;
        this.listParam.live_status = this.form.status;
        this.listParam.page_index = 1;
        this.getList();
        },
        reset() {
        this.keyword = "";
        this.form.status = 0;
        this.area = "";
        this.school = "";
        this.selectedPositions = [];
        this.schoolList = [];
        this.form.platform_id = [];
        this.listParam = {
            live_status: 0,
            keyword: "",
            page_index: 1,
            page_size: 10
        };
        this.getList();
        },
        delShow(id) {
            this.delSel = [id];
            this.getDetails(id);
        },
        getDetails(id) {
            let params = {
                id: id
            };
            const success = res => {
                if (Object.is(res.data.live_status, 2)) {
                    this.delTips = true;
                } else {
                    this.delTips = false;
                }
                
                let yes = ( data => {
                    this.rowLen = 1;
                    this.delCourse();
                })
                let cancel = ( data => {
                    this.delSel = null;
                })
                let title = this.delTips ? '该直播进行中，删除该直播会导致直播结束，确认删除？' : '是否继续删除？';

                this.e_confirm({yes:yes,cancel:cancel,txt: title});
            };

            this.$ajax.get("api/teachingschedule/schedule_info", {params: params, func: { success: success }});
        },
        delAll() {
            if (!this.delSel) {
                this.$message.warning("请选择要删除的选项");
                return false;
            }

            let yes = ( data => {
                this.rowLen = this.delSel.length;
                this.delCourse();
            })
            let cancel = ( data => {
                // this.delSel = null;
            })
            let title = '要删除项含有进行中的直播，确认删除？';

            this.e_confirm({yes:yes,cancel:cancel,txt: title});

            // 返回 promise 后,不知道为什么会出现成功的提示信息
            // let temp = [];
            // let that = this; 
            // let promiseAll = this.delSel.map(function(item) { 
            //     return that.$ajax.get("api/teachingschedule/schedule_info", {params: {id: item}});
            // })

            // this.$ajax.all(promiseAll).then(function(resArr){
            //     resArr.forEach(function(res, i){
            //         temp.push(res);
            //     })

            //     let flag = false;
            //     temp.forEach(item => {
            //         if (item.data.data.live_status === 2) {
            //             flag = true;
            //         }
            //     })

            //     let yes = ( data => {
            //         that.rowLen = that.delSel.length;
            //         that.delCourse();
            //     })
            //     let cancel = ( data => {
            //         that.delSel = null;
            //     })
            //     let title = flag === true ? '选中的直播选项有直播进行中，删除该直播会导致直播结束，确认删除？' : '是否继续删除选中直播？';

            //     that.e_confirm({yes:yes,cancel:cancel,txt: title});
            // })
        },
        delCourse() {
            let params = {
                schedule_id: this.delSel
            };
            const success = res => {
                this.$message.success(res.msg);
                this.delSel = null;

                if (this.listData.length - this.rowLen === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index-- ;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.getList();
            };
            this.$ajax.delete("api/teachingschedule/teaching_schedule", {
                params: params,
                func: { success: success }
            });
        },
        tableSelectionChange(val) {
        if (val.length > 0) {
            this.delSel = [];
            val.forEach(item => {
            this.delSel.push(item.id);
            });
        } else {
            this.delSel = null;
        }
        },
        handleSizeChange(size) {
        this.listParam.page_size = size;
        this.getList();
        },
        handleCurrentChange(page) {
        this.listParam.page_index = page;
        this.getList();
        },
        share(row) {
            let timeShare = Math.floor(new Date().getTime() - this.timeStamp) + row.server_timestamp;

            if (timeShare < row.end_time_s) {
                this.$message({
                    message: '该排课尚未结束，不能进行分享！',
                    type: 'warning'
                });

                return false;
            }

        let params = {
            schedule_id: row.id
        };
        const success = res => {
            this.getList();
        };
        this.$ajax.post("api/teachingschedule/teaching_schedule_share", params, {
                func: { success: success }
        });
        },
        cancelShare(id) {
        let params = {
            schedule_id: id
        };
        const success = res => {
            this.getList();
        };
        this.$ajax.put("api/teachingschedule/teaching_schedule_share", params, {
            // params: schedule_id,
            func: { success: success }
        });
        },
        toLink(id) {
        this.$router.push("/teaching/scheduling/course-detail/" + id);
        },
    }
    };
</script>

<style lang="scss">
.course-llist {
    .btn-default {
        display: inline-block;
    }
}
</style>
